<template>
	<view class="userpassword-content">
		<view class="userpassword-title">
			<span>密码登录</span>
		</view>
		<view class="userpassword-content-form">
			<u-form ref="userForm" labelPosition="left" :model="userForm" :rules="rules">
				<view class="user-form-item">
					<u-form-item ref="username" prop="username" style="width: 250px;">
						<u-input v-model="userForm.username" placeholder="请输入账号" placeholderStyle="color:black">
							<i slot="suffix"><u-icon slot="right" name="account" size="25px" :bold="true"></u-icon></i>
						</u-input>
					</u-form-item>
				</view>
				<view class="user-form-item">
					<u-form-item ref="password" prop="password" style="width: 250px;">
						<u-input v-model="userForm.password" :clearable="false" type="password" placeholder="请输入密码" placeholderStyle="color:black">
							<i slot="suffix"><u-icon slot="right" name="bag" size="25px" :bold="true"></u-icon></i>
						</u-input>
					</u-form-item>
				</view>
			</u-form>
		</view>
		<view class="userpassword-content-button">
			<view class="login-btn-custom-style">
				<u-button type="primary" :loading="loadingUserLoginBtn" loadingText="登录中"
					@tap="submitLogin">登录</u-button>
			</view>
		</view>
	
		<view class="userpassword-content-forget">
			<text class="forget-text">忘记密码？</text>
		</view>
	</view>
</template>

<script>
	import { loginPwd, userInfo } from '@/api/user.js'
	import { setTokenStorage, setUserStorage, getUserStorage } from '@/utils/storage.js'
	
	export default {
		name: 'UserPwd',
		data(){
			return {
				userForm: {
					username: null,
					password: null,
				},
				rules: {
					username: {
						type: 'string',
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change']
					},
					password: {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
				},
				loadingUserLoginBtn: false
			
			}
		},
		methods: {
			async submitLogin(){
				if(!this.userForm.username){
					uni.$u.toast('请输入账号')
					return false
				}
				if(!this.userForm.password){
					uni.$u.toast('请输入密码')
					return false
				}
				
				const res = await loginPwd(this.userForm)
				const token = res.data.token
				if(!token){
					uni.$u.toast('未获取到token')
					return
				}
				setTokenStorage(token)
				
				const user = await userInfo()
				setUserStorage(user.data)
				this.$emit('loginSuccess')
			}
		}
	}
</script>

<style lang="less" scoped>
	.userpassword-content {
		width: 100%;
		padding-top: calc(100vh - 550px);
		
		.userpassword-title {
			font-family: 'Courier New', Courier, monospace;
			font-size: 2rem;
			color: #32CD32;
			margin-bottom: 50px;
			display: flex;
			justify-content: center;
		}
		
		.userpassword-content-form {
			width: 100%;
			display: flex;
			justify-content: center;
			
			.user-form-item {
				width: 250px !important;
				height: 70px;
			}
		}
		
		.userpassword-content-button {
			margin-top: 20px;
			display: flex;
			justify-content: center;
			
			.login-btn-custom-style{
				width: 200px !important;
				border-radius: 20px !important;
				overflow: hidden;
			}
		}
		
		.userpassword-content-forget {
			margin-top: 30px;
			width: 100%;

			.forget-text {
				display: flex;
				justify-content: flex-end;
				margin-right: 20px;
				color: #CD3333;
			}
		}
	}
</style>